<template>
  <div>
    <el-row class="custom-title m-t-20 m-b-20">
        <h3>标的企业财务
            <span class="m-l-20">最后更新时间：{{eventFinanceDto.modifyTime | cmsMoment}}</span>
            <el-button type="primary" size="medium" class="m-l-20 pull-right" @click="saveFinance" round>保存</el-button>
        </h3>
    </el-row>
    <el-form label-width="90px" class="custom-box p-20" :rules="rules" ref="eventFinanceDto" :model="financeInEventDto">
        <el-row>
            <el-col :span="10">
                <el-form-item label="起始时间" prop="startTime">
                    <el-date-picker
                        class="w-100"
                        v-model="financeInEventDto.startTime"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="报表类型">
                    <el-select disabled v-model="comFinanceVO.reportType" class="w-100">
                        <el-option v-for="(item,index) in initView.financeReportType" :key="index" :value="item.dictValue-0" :label="item.dictName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="总资产">
                    <el-input disabled class="w-85" v-model="comFinanceVO.assets">
                        <template slot="append">万</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="营业收入">
                    <el-input disabled class="w-85" v-model="comFinanceVO.businessIncome">
                      <template slot="append">万</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="营业利润">
                    <el-input disabled class="w-85" v-model="comFinanceVO.operatingProfit">
                      <template slot="append">万</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="净利润">
                    <el-input disabled class="w-85" v-model="comFinanceVO.netProfit">
                      <template slot="append">万</template>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker 
                        class="w-100"
                        v-model="financeInEventDto.endTime"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="币种">
                    <el-select disabled v-model="comFinanceVO.currencyType" class="w-100">
                        <el-option v-for="(item,index) in initView.currencyType" :key="index" :value="item.dictValue-0" :label="item.dictName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="净资产">
                    <el-input disabled class="w-85" v-model="comFinanceVO.netAssets">
                      <template slot="append">万</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="归属于母公司净资产" class="line-h-20">
                    <el-input disabled class="w-85" v-model="comFinanceVO.parentAsset">
                      <template slot="append">万</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="利润总额">
                    <el-input disabled class="w-85" v-model="comFinanceVO.totalProfit">
                      <template slot="append">万</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="归属于母公司净利润" class="line-h-20">
                    <el-input disabled class="w-85" v-model="comFinanceVO.parentNetProfit">
                      <template slot="append">万</template>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="3" :offset="1">
                <el-button type="primary" @click="getCompanyFinance">调取</el-button>
            </el-col>
        </el-row>
        <hr/>
        <el-row class="custom-title">
            <h3>比率</h3>
        </el-row>
        <el-row class="m-t-20">
            <el-col :span="8">
                <el-form-item label="发行前市盈率" class="line-h-20">
                    <el-input v-model="eventFinanceDto.peRateAgo"></el-input>
                </el-form-item>
                <el-form-item label="发行前市净率" class="line-h-20">
                    <el-input v-model="eventFinanceDto.netRateAgo"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="发行后市盈率" class="line-h-20">
                    <el-input v-model="eventFinanceDto.peRateAfter"></el-input>
                </el-form-item>
                <el-form-item label="发行后市净率" class="line-h-20">
                    <el-input v-model="eventFinanceDto.netRateAfter"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="市销率">
                    <el-input v-model="eventFinanceDto.marketRate"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="eventFinanceDto.remark" type="textarea" :rows="2"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="custom-title m-t-20">
            <h3>审计公司</h3>
            <el-table :data="comFinanceData">
                <el-table-column label="报告ID" prop="id"></el-table-column>
                <el-table-column label="报告名称" prop="reportName"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="downloadFile(scope.row.reportName, scope.row.reportUrl)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </el-form>
    <el-dialog :visible.sync="financeDialog">
        <el-table :data="companyFinanceData">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="财务年份" prop="startTime">
                <template slot-scope="scope">
                    {{scope.row.startTime | cmsMoment}}至{{scope.row.endTime | cmsMoment}}
                </template>
            </el-table-column>
            <el-table-column label="财报类型" prop="financeType">
            </el-table-column>
            <el-table-column label="报表类型" prop="reportType">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="addFinaceInfo(scope.row)">添加</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import EventFinanceService from '../../../../service/event/event-finance-controller';
import { EventFinanceDto, ComFinanceVO, EventDto, ComFinanceAuditVO } from '../../../../api/Interface';
import { FinanceInEventDto, FinanceRateInEventDto } from '../../../../service/event/Interface';
import EventService from '../../../../service/event/index';
import CompanyService from '../../../../service/subject/company/finance-info/index';
import Api from '../../../../api/common/commonController.api';
import getUrl from '../../../../service/getUrl';
@Component({
  components: { }
})
export default class EnterpriseFinance extends Vue {
  // 初始化数据 相当于data
  public financeReportType = this.$store.state.user.dictionary.dicList.financeReportType; // 报表类型
  public currencyType = this.$store.state.user.dictionary.dicList.currencyType; // 货币类型
  public eventFinanceDto: EventFinanceDto = {} as EventFinanceDto; // 添加标的企业财务参数
  public financeInEventDto: FinanceInEventDto = {} as FinanceInEventDto; // 根据时间调取财务信息
  public financeRateInEventDto: FinanceRateInEventDto = {} as FinanceRateInEventDto; // 根据事件id、财务Id获取企业财务信息比率信息
  public comFinanceVO: ComFinanceVO = {} as ComFinanceVO; // 自动添加的财务信息
  public companyFinanceData: Array<ComFinanceVO> = []; // 企业财务信息
  // 事件基本信息类型
  public eventBasicInfo: EventDto = {} as EventDto;
  // public comFinanceAuditVO: ComFinanceAuditVO = {} as ComFinanceAuditVO; // 审计公司
  public comFinanceData: Array<ComFinanceAuditVO> = []; // 审计公司
  public eventId: string = ''; // 事件ID
  public companyId: string = ''; // 企业ID
  public id: string = ''; // 标的企业财务ID（主id）
  public financeId: number = 0; // 财务ID
  public financeDialog: boolean = false;
  public initView = {
    financeReportType: this.$store.state.user.dictionary.dicList.financeReportType, // 报表类型
    currencyType: this.$store.state.user.dictionary.dicList.currencyType, // 币种
  };
  public rules = {
      endTime: [{ type: 'date', required: true, message: '请选择结束时间', trigger: 'change' }],
      startTime: [{ type: 'date', required: true, message: '请选择开始时间', trigger: 'change' }],
  };
  // refs
  public $refs: { 
    eventFinanceDto: HTMLFormElement;
   };

  // 声明周期钩子
  public mounted() {
    this.eventId = this.$route.params.eventId;
    if (this.eventId !== '-1') {
        this.getBasicInfo(); // 获取基本信息
        this.getEventFinanceInfo(); // 获取财务信息
    }
  }

  // 获取基本信息
  public async getBasicInfo() {
      const res = await EventService.getEventDetail(this.eventId);
      if (res.resCode === '0') {
          this.companyId = res.data.companyId;
          this.eventBasicInfo = res.data; // 企业基本信息
      }
  }
  // 根据事件id获取财务信息
  public async getEventFinanceInfo() {
      const { data } = await EventFinanceService.getEventFinanceInfo(this.eventId);
      this.id = data.id;
      this.financeId = data.financeId;
      this.eventFinanceDto = data;
      if (this.financeId) {
        this.CompanyService(this.financeId);
      }
  }
  // 根据财务信息id 获取当前某条财务信息信息
  public async CompanyService(id: number) {
    const {data} = await CompanyService.getComFinanceById(id);
    this.comFinanceData = data.comFinanceAuditList; // 审计公司
    this.comFinanceVO = data;
  }
  // 调取财务信息
  public async getCompanyFinance() {
      this.$refs.eventFinanceDto.validate(async (valid: boolean) => {
          if (valid) {
              this.financeDialog = true;
              this.financeInEventDto.startTime = new Date(this.financeInEventDto.startTime).toString();
              this.financeInEventDto.endTime = new Date(this.financeInEventDto.endTime).toString();
              this.financeInEventDto.companyId = this.companyId;
              const res = await EventFinanceService.getCompanyFinanceByTime(this.financeInEventDto);
              if (res.resCode === '0') {
                  this.companyFinanceData = res.data; // 财务信息
              }
          }
      });
  }
  // 下载审计公司报告
  public downloadFile(reportName: string, reportUrl: string) {
      window.open(`${getUrl()}${Api.download.url}?Authorization=Bearer${this.$store.state.user.token}&fileName=${reportName}&fileUrl=${reportUrl}`);
  }
  // 添加财务比率
  public async addFinaceInfo(comFinanceVO: ComFinanceVO) {
      this.comFinanceData = comFinanceVO.comFinanceAuditList; // 审计公司
      this.financeId = comFinanceVO.id; // 财务ID
      this.eventFinanceDto.financeId = comFinanceVO.id; // 财务ID
      this.comFinanceVO = comFinanceVO; // 标的企业财务信息
      this.financeDialog = false; // 隐藏列表
  }
  // 保存
  public saveFinance() {
    this.eventFinanceDto.eventId = Number(this.$route.params.eventId);
      if ( !this.id ) {
          this.saveEventFinanceInfo();
      } else {
          this.updateEventFinance();
      }
  }
  // 添加标的企业财务
  public async saveEventFinanceInfo() {
      const res = await EventFinanceService.saveEventFinanceInfo(this.eventFinanceDto);
      if (res.resCode === '0') {
          this.$message.success('添加成功！');
      }
  }
  // 修改标的企业财务
  public async updateEventFinance() {
      const res = await EventFinanceService.updateEventFinance(this.eventFinanceDto);
      if (res.resCode === '0') {
          this.$message.success('修改成功！');
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .noPass {
    color: #f00;
  }
  /* .w-100 {
    width: 100%;
  }
  .w-85 {
    width: 85%;
  }
  .w-80 {
    width: 80%;
  }
  .w-55 {
    width: 55%;
  } */
  .align-center-self {
    text-align: center;
    line-height: 40px;
  }
  .m-l-20{
    margin-left: 20px;
  }
</style>
